﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 移动端设置 -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>sim-captcha</title>
    <!-- Bootstrap -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>

  <body>
    <div id="app" class="container" style="margin: 200px auto;">
      <div class="row">
        <div class="col-md-4 col-md-offset-4">
          <div class="form">
            <div class="form-group">
              <label>用户名</label>
              <input id="js-input-userName" type="text" class="form-control" />
            </div>
            <div class="form-group">
              <label>密码</label>
              <input
                id="js-input-password"
                type="password"
                class="form-control"
              />
            </div>
            <div>
              <input id="js-ticket" type="hidden" />
              <input id="js-userId" type="hidden" />
            </div>
            <button id="js-btn-verify" class="btn btn-gray btn-block">
              点击验证
            </button>
            <button
              id="js-btn-login"
              class="btn btn-info btn-block"
              style="margin-top: 14px;"
            >
              登陆
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/sim-captcha/dist/sim-captcha.min.js"></script> -->
    <script src="/dist/sim-captcha.js"></script>
    <script>
      function successCallback(res) {
        if (res.code === 0) {
          // 验证码服务端-验证通过
          console.log("第一次验证通过");
          // 第一次验证通过
          $("#js-btn-verify").text("验证通过");
          $("#js-btn-verify")[0].className = "btn btn-success btn-block";
          // 准备 业务后台 第二次验证
          $("#js-ticket").val(res.ticket);
          $("#js-userId").val(res.userId);
          console.log("第一次验证 结束");
        }
      }

      $(function () {
        // 点击验证
        window.simCaptcha = new SimCaptcha({
          element: document.getElementById("js-btn-verify"),
          appId: "132132",
          callback: successCallback,
          baseUrl: "https://captcha.moeci.com",
          imgUrl: "/api/vCode/VCodeImg",
          checkUrl: "/api/vCode/VCodeCheck",
        });

        $("#js-btn-login").click(function () {
          // 获取用户名(手机号/邮箱), 密码, 票据
          var userName = $("#js-input-userName").val().trim();
          var password = $("#js-input-password").val();
          var ticket = $("#js-ticket").val();
          var userId = $("#js-userId").val();
          if (!userName || !password) {
            alert("请输入账号密码");
            return false;
          } else if (!ticket || !userId) {
            alert("请点击验证");
            return false;
          }

          $.ajax({
            url: "/home/login",
            type: "POST",
            data: {
              userName: userName,
              password: password,
              ticket: ticket,
              userId: userId,
            },
            dataType: "json",
            success: function (data) {
              if (data.code == -10) {
                // 账号或密码错误
                alert("账号或密码错误");
              } else if (data.code == -11) {
                alert("请点击验证");
              } else if (data.code == -12) {
                alert("请输入账号,密码");
              } else if (data.code < 0) {
                // 验证不通过
                console.log(data);
                $("#js-btn-verify").text("验证失败, 请重新点击验证");
                $("#js-btn-verify")[0].className = "btn btn-gray btn-block";
                $("#js-ticket").val("");
                $("#js-userId").val("");
              } else {
                // 一切正确
                alert("登陆成功");
              }
            },
          });
        });
      });
    </script>
  </body>
</html>
